<template>
    <!-- 黑名单列表页 -->
    <div class="page">
        <div class="top">
            <div class="left">
                <el-button size="mini" @click="exportss()">导出</el-button>
            </div>
            <div class="right"></div>
        </div>
        <div class="list">
            <el-table
                ref="multipleTable"
                :max-height="$store.state.tableHeight"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                class="table"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                v-sortTable="{
                    tableData: tableData,
                    _this: this,
                    ref: 'multipleTable'
                }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="工程分包商名称" width="120">
                    <template slot-scope="scope">
                        <span
                            @click="Examine(scope.row.id)"
                            style="color: blue; cursor: pointer"
                        >
                            {{ scope.row.subcontractorName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="registerCapital"
                    label="注册资本（万元）"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    prop="creditCode"
                    label="统一社会信用代码"
                    width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="manageOrgName"
                    label="管理单位"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="150"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="businessScopeName"
                    label="主营范围"
                    width="150"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="qualificationLevelName"
                    label="资质等级"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="creditLevel"
                    label="信用等级"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="evaluateSource"
                    label="评价来源"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="startDate"
                    label="开始日期"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="engDate"
                    label="结束日期"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <ComPagination />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination
    },
    data () {
        return {
            tableData: [
                {
                    subcontractorName: '', //工程分包商名称
                    registerCapital: '', //注册资本
                    creditCode: '', //统一社会信用代码
                    manageOrgName: '', //管理单位
                    businessScopeName: '', //主营范围
                    qualificationLevelName: '', //资质等级
                    creditLevel: '', //信用等级
                    evaluateSource: '', //评价来源
                    startDate: '', //开始日期
                    engDate: '' //结束日期
                }
            ]
        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
        //查询分包商列表数据
        getData () {
            this.$Ajax
                .httpPost({
                    url: '/outer/subcontractor/listByBlackEntity',
                    params: {
                        creditcode: '',
                        keyword: '',
                        limit: 10,
                        number: '',
                        page: 1,
                        subcontractorname: ''
                    }
                })
                .then(res => {
                    console.log(res)
                    this.tableData = res.list
                })
        },
        //导出按钮
        exportss () {
            // this.$router.push('/subcontractorAdd')
        },
        //点击表格对应行查看
        Examine (id) {
            this.$router.push({
                path: '/blacklistExamine',
                query: { id }
            })
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(239, 242, 246);
    border: 1px solid #ccc;
    border-radius: 5px;
    .top {
        height: 50px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .left {
            flex: 1;
            ::v-deep.el-button--mini {
                margin-top: 10px;
                margin-left: 5px;
                color: #fff;
                background-color: rgb(122, 168, 24);
            }
        }
        .right {
            width: 300px;
        }
    }
    .list {
        flex: 1;
        margin-top: 10px;
    }
    .bottom {
        height: 50px;
        padding-bottom: 20px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 10px; // 纵向滚动条
    }
    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 5px;
    }
}
</style>
